<template>
  <div class="waterworks">
      <div id="cesiumContainer1"></div>
<!--      <div class="searchDiv">-->
<!--        -->
<!--      </div>-->
      <div class="xunjian">

<!--        <div class="yuanDiv" @click="toggleSelected(3)">-->
<!--          <img src="../../assets/images/shuizhi.png" alt="">-->
<!--          <div class="yuan" :class="{ 'selected': isSelected[3] }"></div>-->
<!--        </div>-->

        <!-- 第一个元素 -->
        <div class="yuanDiv" @click="toggleSelected(1)">
          <img src="../../assets/images/icon/videok.png" alt="">
          <div class="yuan" :class="{ 'selected': isSelected[1] }"></div>
        </div>

        <!-- 第二个元素 -->
        <div class="yuanDiv" @click="toggleSelected(2)">
          <img src="../../assets/images/icon/yewei.png" alt="">
          <div class="yuan" :class="{ 'selected': isSelected[2] }"></div>
        </div>
        <!-- 第三个元素 -->
        <div class="yuanDiv" @click="toggleSelected(3)">
          <img class="alarm-icon" src="../../assets/icons/gaojing.png" alt="">
          <div class="yuan" :class="{ 'selected': isSelected[3] }"></div>
        </div>



        <div @click="showInfoWindow('',2)">
          <img src="../../assets/icons/xunjian.png" alt="">
        </div>

      </div>
      <div class="aslider_s">
            <div class="asliderStyle">
              <div class="cendiv">
                <ul>
                  <li>
<!--                    <img src="../../assets/images/top1.png" alt="">-->
                    <div class="oneStyle">
                      <div class="headDiv">
                          <span class="shebei">设备管理</span>
                      </div>
                      <div class="contentDiv">
                          <div class="bingDiv">
                            <div class="flex_c">
                              <img src="../../assets/images/shebei2.png" alt="">
                              <div>
                                设备统计：<span class="colortj">230台</span></div>
                              </div>
                            <div class="echarts" id="bingtone">
                                <div v-for="(item,index) in dataone" class="oneStyle1">
                                  <div>
                                    <el-tag :type="item.type">{{ item.name }}</el-tag>
                                  </div>
                                  <div>
                                    <el-tag :type="item.type">{{ item.value }}</el-tag>
                                  </div>
                                </div>
                            </div>
                          </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <!--                    <img src="../../assets/images/top1.png" alt="">-->
                    <div class="oneStyle">
                      <div class="headDiv">
                        <span class="shebei">能耗管理</span>
                      </div>
                      <div class="contentDiv">
                        <div class="tiaoDiv">
                          <div class="tiaoC">
                            <el-tag key="1" :type="tag1Type" effect="dark" @click="showEcharts(1)"><span style="cursor: pointer;">耗水量</span></el-tag>
                            <el-tag key="2" :type="tag2Type" effect="dark" @click="showEcharts(2)"><span style="cursor: pointer;">耗电量</span></el-tag>
                            <el-tag key="3" :type="tag3Type" effect="dark" @click="showEcharts(3)"><span style="cursor: pointer;">耗药量</span></el-tag>
                          </div>
                          <div  class="echarts" id="bingt1"></div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <!--  <img src="../../assets/images/top1.png" alt="">-->
                    <div class="oneStyle">
                      <div class="headDiv">
                        <span class="shebei">告警管理</span>
                      </div>
                      <div class="contentDiv">
                        <div class="backround">
                          <div class="toptitle">
                            <div class="item">相应级别</div>
                            <div class="item">报警点位</div>
                            <div class="item">报警内容</div>
                            <div class="item">报警时间</div>
                          </div>
                          <div class="gundong">
                            <vue3-seamless-scroll
                              hover-stop="true"
                              :list="listData"
                              hover="true"
                              step="0.3">
                              <div
                                v-for="(item, index) in listData"
                                :key="index"
                                class="item"
                                style="font-size: 14px"
                              >
                                <span
                                  v-for="(value, key, ind) in item"
                                  :key="ind"
                                  class="spanClass"
                                  :class="{ 'red-text': value === '1', 'orange-text': value === '2'}"
                                >
                                  <span v-if="key === 'jibie'">  {{ toRomanNumeral(value) }}</span>
                                  <span v-if="key != 'jibie'">{{ value }}</span>
                                </span>
                              </div>
                            </vue3-seamless-scroll>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
      <div class="h100" v-show="dialogTableVisible" >
        <div class="tanDiv"></div>
        <div  class="diaStyle">
          <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
          <div v-show="tanShow === '2'" class="contentN">
              <div class="flex_b">
                <div class="echartsDiv">
                  <div id="yeweiji" class="echarts"></div>
                </div>
                <div class="tableDiv">
                  <div class="waringStyle">
                    <el-date-picker
                      v-model="valueDate"
                      type="datetimerange"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                    <el-button class="ml10" type="primary" plain @click="jiexi">查看</el-button>
                  </div>
                  <div class="tableDiv">
                    <el-table :data="tableData"   :header-cell-style="{ 'background-color': 'transparent' }" >
                      <el-table-column property="xh" label="序号"  width="60"></el-table-column>
                      <el-table-column property="ssshuiwei" label="实时水位" ></el-table-column>
                      <el-table-column property="jjshuiwei" label="警戒水位" ></el-table-column>
                      <el-table-column property="bzshuiwei" label="保证水位" ></el-table-column>
                      <el-table-column property="lsshuiwei" label="历史最高水位" ></el-table-column>
                      <el-table-column property="date" label="更新时间"></el-table-column>
                    </el-table>
                    <pagination
                      background
                      v-show="total>0"
                      :total="total"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getList"
                    />
                  </div>
                </div>
              </div>
          </div>
          <div v-show="tanShow === '1'" style="display: flex;">
            <div class="videoDiv">
              <video ref="videoPlayer" autoplay controls v-if="videoSrc === '1'">
                <source src="../../assets/video/baoqi.mp4" type="video/mp4">
              </video>
              <video ref="videoPlayer" autoplay  controls="false" v-if="videoSrc === '2'">
                <source src="../../assets/video/xunjian.mp4" type="video/mp4">
              </video>
              <video ref="videoPlayer" autoplay  controls="false" v-if="videoSrc === '3'">
                <source src="../../assets/video/baojing.mp4" type="video/mp4">
              </video>
            </div>
            <div class="colorStyle ">
              <el-tag size="large">{{ name }} 云台控制</el-tag>

              <div class="borderStyle mt5">
                  <div class="zhi">
                    <div style="text-align: center;"><el-tag size="large" style="cursor: pointer;">上</el-tag></div>
                    <div style="display: flex;justify-content: space-evenly;"><el-tag size="large" style="cursor: pointer;">左</el-tag><el-tag style="cursor: pointer;" size="large">右</el-tag></div>
                    <div style="text-align: center;"><el-tag style="cursor: pointer;" size="large">下</el-tag></div>
                  </div>
                  <div class="yuzhi">
                    <p>预置点位选择</p>
                    <div class="ulli">
                      <el-check-tag v-for="(item, index) in items" class="ml5" :key="index" :checked="checked[item.id]" @change="onChange(item.id)">
                        {{ item.text }}
                      </el-check-tag>
                    </div>
                  </div>

              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import * as Cesium from 'cesium';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";
let viewer,videoviewer,waterviewer;

import videok from '@/assets/images/icon/videok.png'; // 根据实际的文件路径修改引入路径
import yewei from '@/assets/images/icon/yewei.png'; // 根据实际的文件路径修改引入路径
import hong from '@/assets/icons/hong.png';
import point from "@/assets/images/icon/point.png"; // 根据实际的文件路径修改引入路径

export default {
  name: "waterworks",
  components: {
    Vue3SeamlessScroll
  },
  data() {
    return {
      map:null,
      first:'0',
      echartShe:null,
      myChart1:null,
      myChart2:null,
      second:'0',
      three:'0',
      dialogTableVisible:false,
      tanShow:'1',
      videoSrc:'',
      name:'1#二沉池',
      activeTag: 1,
      tag1Type: 'primary',
      tag2Type: 'info',
      tag3Type: 'info',
      videoOptions: {
        sources: [{
          src: '../../assets/video/baoqi.mp4',
          type: 'video/mp4'
        }],
        // 其他选项，比如自动播放、循环等
      },
      tableData:[
        {
          xh:1,
          date:'2024-01-01 14:00:00',
          ssshuiwei:'1.5',
          jjshuiwei:'1.2',
          bzshuiwei:'1.4',
          lsshuiwei:'3',
        }, {
          xh:2,
          date:'2024-01-01 15:00:00',
          ssshuiwei:'2',
          jjshuiwei:'1.5',
          bzshuiwei:'3',
          lsshuiwei:'1.4',
        }, {
          xh:3,
          date:'2024-01-01 16:00:00',
          ssshuiwei:'2.5',
          jjshuiwei:'1.2',
          bzshuiwei:'1.3',
          lsshuiwei:'1.9',
        },{
          xh:4,
          date:'2024-01-01 17:00:00',
          ssshuiwei:'1.1',
          jjshuiwei:'1.4',
          bzshuiwei:'1.9',
          lsshuiwei:'3',
        },{
          xh:5,
          date:'2024-01-01 18:00:00',
          ssshuiwei:'1.5',
          jjshuiwei:'1.1',
          bzshuiwei:'1.1',
          lsshuiwei:'2.5',
        }
      ],
      // 总条数
      total: 10,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        valueDate: null,
      },
      activeName:'first',
      stations:[
        {
          id:'11111',
          name:'平流沉砂池摄像头',
          type: '1',
          lng:'118.2993943',
          lat:'33.9361085'
        },{
          id:'22222',
          name:'二沉池摄像头',
          type: '1',
          lng:'118.3004768',
          lat:'33.9347951'
        },{
          id:'33333',
          name:'生化池摄像头',
          type: '1',
          lng:'118.2996520',
          lat:'33.9351452'
        }


      ],
      yeweiStation:[
        {
          id:'44444',
          name:'液位计1',
          type: '2',
          lng:'118.30',
          lat:'33.9351452'
        }
      ],
      stations1:[
        {
          id:'11111',
          name:'摄像头1',
          type: '1',
          lng:'118.2993943',
          lat:'33.9361085'
        },{
          id:'22222',
          name:'摄像头2',
          type: '2',
          lng:'118.3004768',
          lat:'33.9347951'
        }
      ],
      //建筑物
      stations2:[
        {
          id:'111',
          name:'办公楼',
          type: '1',
          lng:'118.3006295',
          lat:'33.9360111'
        },{
          id:'222',
          name:'鼓风机房',
          type: '2',
          lng:'118.29986859300',
          lat:'33.93606893600'
        },{
          id:'333',
          name:'3#生化池',
          type: '3',
          lng:'118.30045537800',
          lat:'33.93555802100'
        },{
          id:'3331',
          name:'2#生化池',
          type: '3',
          lng:'118.29990101900',
          lat:'33.93552261700'
        },{
          id:'3332',
          name:'1#生化池',
          type: '3',
          lng:'118.2993814',
          lat:'33.9354960'
        },{
          id:'444',
          name:'3#二沉池',
          type: '4',
          lng:'118.30051557800',
          lat:'33.93499185200'
        },{
          id:'4441',
          name:'2#二沉池',
          type: '4',
          lng:'118.2999671',
          lat:'33.9349324'
        },{
          id:'4442',
          name:'1#二沉池',
          type: '4',
          lng:'118.29947796400',
          lat:'33.93493465000'
        },{
          id:'555',
          name:'4#曝气池',
          type: '5',
          lng:'118.30051670300',
          lat:'33.93417290600'
        },{
          id:'666',
          name:'浓缩/匀质池',
          type: '6',
          lng:'118.29973140900',
          lat:'33.93424526600'
        },{
          id:'777',
          name:'脱水机房',
          type: '7',
          lng:'118.29975774700',
          lat:'33.93399788100'
        },{
          id:'888',
          name:'消毒间',
          type: '8',
          lng:'118.29996094400',
          lat:'33.93449002500'
        },{
          id:'999',
          name:'平流沉砂池',
          type: '9',
          lng:'118.29942323500',
          lat:'33.93601853300'
        },{
          id:'1000',
          name:'配电室',
          type: '10',
          lng:'118.29952164500',
          lat:'33.93622756400'
        },{
          id:'1001',
          name:'1#接触池',
          type: '11',
          lng:'118.29949263200',
          lat:'33.93463791800'
        },{
          id:'1002',
          name:'2#接触池',
          type: '11',
          lng:'118.29994829600',
          lat:'33.93466121900'
        },{
          id:'1003',
          name:'3#接触池',
          type: '11',
          lng:'118.30056209700',
          lat:'33.93464167000'
        },
      ],
      status: false,
      listData: [
        {
          'jibie': '1',
          'dianwei': '1#输送机',
          'neirong': '开到位故障',
          'shijian': '2024-05-02 12:00',
        },
        {
          'jibie': '2',
          'dianwei': '1#输送机',
          'neirong': '开到位故障',
          'shijian': '2024-05-02 12:00',
        },
        {
          'jibie': '3',
          'dianwei': '1#输送机',
          'neirong': '开到位故障',
          'shijian': '2024-05-02 12:00',
        },
        {
          'jibie': '4',
          'dianwei': '1#输送机',
          'neirong': '开到位故障',
          'shijian': '2024-05-02 12:00',
        },
        {
          'jibie': '2',
          'dianwei': '1#输送机',
          'neirong': '开到位故障',
          'shijian': '2024-05-02 12:00',
        }
      ],
      pickerOptions: {
       shortcuts: [{
         text: '最近一周',
         onClick(picker) {
           const end = new Date();
           const start = new Date();
           start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
           picker.$emit('pick', [start, end]);
         }
       }, {
         text: '最近一个月',
         onClick(picker) {
           const end = new Date();
           const start = new Date();
           start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
           picker.$emit('pick', [start, end]);
         }
       }, {
         text: '最近三个月',
         onClick(picker) {
           const end = new Date();
           const start = new Date();
           start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
           picker.$emit('pick', [start, end]);
         }
       }]
     },
      valueDate: '',
      dataone:'',
      items: [
        { id: 1, text: '预置点1' },
        { id: 2, text: '预置点2' },
        { id: 3, text: '预置点3' },
        { id: 4, text: '预置点4' },
        { id: 5, text: '预置点5' },
        { id: 6, text: '预置点6' },
      ],
      checked: {}, // 使用对象来存储每个标签的选中状态
      isSelected: {
        1: false, // 第一个元素的选中状态
        2: false  // 第二个元素的选中状态
      },


    };
  },

  mounted() {
    this.initMap();
    this.shebei();
    this.nenghao();

    const videoPlayer = ref(null);
    if (videoPlayer.value) {
      videoPlayer.value.play();
    }

  },

  methods: {
    async initMap(){
      Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;
      // const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // 创建 Cesium 地球对象
      viewer = new Cesium.Viewer('cesiumContainer1',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        timeline: false,
        animation: false,
        geocoder:false,
        // baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
      });
      // 将视角定位到指定坐标点118.2996520
      const destination = Cesium.Cartesian3.fromDegrees(118.3033,33.9353,300); // 你的目标坐标点
      const heading = Cesium.Math.toRadians(-90); // 朝向北方（0度）
      const pitch = Cesium.Math.toRadians(-45); // 俯仰角，根据你的需求调整
      const roll = 0; // 翻滚角，通常设置为0
      viewer.camera.setView({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      });



      const santaMonicaParcels = Cesium.ArcGisMapServerImageryProvider.fromUrl("https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/GLmap/MapServer", {
        token:apiKey
      });
      viewer.scene.imageryLayers.add(
        Cesium.ImageryLayer.fromProviderAsync(santaMonicaParcels)
      );
      let tileset,tileset1;

      try {
         tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2576239);
         tileset1 = await Cesium.Cesium3DTileset.fromIonAssetId(2566471);
          viewer.scene.primitives.add(tileset);
          viewer.scene.primitives.add(tileset1);
          // await viewer.zoomTo(tileset);
      } catch (error) {
        console.log(error);
      }

// 将地点添加到Cesium地图上
      let imgUrl;
      // 将地点添加到Cesium地图上
      this.stations2.forEach((station) => {
        const position = Cesium.Cartesian3.fromDegrees(parseFloat(station.lng), parseFloat(station.lat),10);
        viewer.entities.add({
          position: position,
          id: station.id,
          name: station.name,
          type: station.type,
          billboard: {
            // 使用一个简单的图标作为标记
            image: point, // 替换为你的图标路径
            scale: 1.0,
            width: 35,//设置图片大小
            height: 35,//设置图片大小
            show: true,// 是否显示
          },
          label: {
            text: station.name,
            showBackground: true, // 显示背景
            backgroundColor: new Cesium.Color(0.0, 0.5, 0.3, 0.8), // 背景颜色
            font: '16px monospace',
            style: Cesium.LabelStyle.FILL,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置：底部
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
            pixelOffset: new Cesium.Cartesian2(0, -20) // 偏移量，以调整标签位置
          }
        });
      });

      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // 添加点击事件监听器
      handler.setInputAction((click) => {
        // 获取点击位置的实体信息
        const pickedObject = viewer.scene.pick(click.position);
        if (Cesium.defined(pickedObject) && pickedObject.id) {
          const entity = pickedObject.id;
          const id = entity.id; // 假设实体的名称存储在name属性中
          const type = entity.type; // 假设实体的名称存储在name属性中
          // 调用自定义的弹窗组件显示信息
          this.dialogTableVisible = false;
          // this.$emit('update-current-component', { id: id, type: type });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


    },

    shebei(){
// 生成一个在 190 到 200 之间的随机数
      const aaa1 = Math.floor(Math.random() * (200 - 190 + 1)) + 190;

// 生成三个在 1 到 5 之间的随机数
      const aaa2 = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
      const aaa3 = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
      const aaa4 = Math.floor(Math.random() * (5 - 1 + 1)) + 1;

      this.sheEcharts(aaa1,aaa2,aaa3,aaa4)


    },

    //告警数量展示
    waring(){
      this.stations1.forEach(station => {
        const position = Cesium.Cartesian3.fromDegrees(parseFloat(station.lng), parseFloat(station.lat), 6);
        let imgUrl;
        if (station.type === '1') {
          imgUrl = hong;
        } else if (station.type === '2') {
          imgUrl = yewei;
        }else if (station.type === '3') {
          imgUrl = hong;
        }
        viewer.entities.add({
          position: position,
          id: station.id,
          name: station.name,
          type: station.type,
          billboard: {
            image: imgUrl,
            scale: 1.0,
            width: 32,
            height: 35,
            show: true,
          },
          label: {
            text: station.name,
            font: '14px font-family',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            fillColor: Cesium.Color.YELLOW,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -20)
          }
        });
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        // 添加点击事件监听器
        handler.setInputAction((click) => {

          // 获取点击位置的实体信息
          const pickedObject = viewer.scene.pick(click.position);
          if (Cesium.defined(pickedObject) && pickedObject.id) {
            const entity = pickedObject.id;
            const id = entity.id; // 假设实体的名称存储在name属性中
            const type = entity.type; // 假设实体的名称存储在name属性中
            // 调用自定义的弹窗组件显示信息
            this.showInfoWindow(entity,3);
            // this.$emit('update-current-component', { id: id, type: type });
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      });

    },

// 自定义弹窗显示实体信息
    showInfoWindow(content,b) {
        // 在这里实现您自己的弹窗显示逻辑，可以是模态框、信息窗口等
      this.dialogTableVisible = true;

      if(b == '1'){
        this.tanShow = content.type;
        this.name = '1#二沉池'
        this.videoSrc = '1'

      }else if(b == '2'){
        this.tanShow = '1';
        this.videoSrc = '2'
        this.name = '2#二沉池'
      }else if(b == '3'){
        this.tanShow = '1';
        this.videoSrc = '3'
        this.name = '2#二沉池'
      }
      this.echartsDiv()
        // 示例代码仅在控制台打印信息
    },

    echartsDiv(){
// 生成随机小数函数
      function generateRandomFloat(min, max) {
        return (Math.random() * (max - min) + min).toFixed(1);
      }
      const timeData = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'];
      const realTimeData = timeData.map(() => generateRandomFloat(0, 3)); // 实时水位
      const alertData = timeData.map(() => generateRandomFloat(2, 3)); // 警戒水位
      const guaranteedData = timeData.map(() => generateRandomFloat(1, 2)); // 保证水位
      const highestData = timeData.map(() => generateRandomFloat(2, 3)); // 历史最高水位

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '水位变化图表',
          top:'3%',
          textStyle: {
            color: '#fff' // 标题字体颜色设置为白色
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['实时水位', '警戒水位', '保证水位', '历史最高水位'],
          top:'8%',
          textStyle: {
            color: '#fff' // 标题字体颜色设置为白色
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top:'15%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timeData,
          axisLabel: {
            color: '#fff' // x 轴字体颜色设置为白色
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} m', // 纵轴单位
            color: '#fff' // y 轴字体颜色设置为白色
          }
        },
        series: [
          {
            name: '实时水位',
            type: 'line',
            smooth: true,
            data: realTimeData
          },
          {
            name: '警戒水位',
            type: 'line',
            smooth: true,
            data: alertData
          },
          {
            name: '保证水位',
            type: 'line',
            smooth: true,
            data: guaranteedData
          },
          {
            name: '历史最高水位',
            type: 'line',
            smooth: true,
            data: highestData
          }
        ]
      };


      this.myChart2 = echarts.init(document.getElementById("yeweiji"));
      this.myChart2.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart2.resize();
      });
    },




    showEcharts(tag) {
      this.activeTag = tag;
      // 更新 el-tag 样式
      if (tag === 1) {
        this.tag1Type = 'primary';
        this.tag2Type = 'info';
        this.tag3Type = 'info';
      } else if (tag === 2) {
        this.tag1Type = 'info';
        this.tag2Type = 'primary';
        this.tag3Type = 'info';
      } else if (tag === 3) {
        this.tag1Type = 'info';
        this.tag2Type = 'info';
        this.tag3Type = 'primary';
      }
      // 在这里根据 tag 显示对应的 echarts
      this.nenghao()
      // 根据您的实际需求编写相应的代码
  },

    // 能耗
    nenghao(){
      const option = {
        color: ['#80FFA5', '#00DDFF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['本周', '上周'],
          textStyle: {
            color: 'white' // 图例字体颜色
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top:'14%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff' // 设置轴线颜色为白色
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff' // 设置轴线颜色为白色
              }
            },
            axisTick: {
              lineStyle: {
                color: '#fff' // 设置刻度线颜色为白色
              }
            }
          }
        ],
        series: [
          {
            name: '本周',
            type: 'line',
            stack: 'Total',
            smooth: true,
            label: {
              show: true,
              textStyle: {
                color: 'white' // 标签文本颜色
              }
            },
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: '上周',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          },
        ]
      };
      this.myChart1 = echarts.init(document.getElementById("bingt1"));
      this.myChart1.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart1.resize();
      });
    },



    //设备统计
    sheEcharts(a,b,c,d){
      // 先销毁之前的图表实例

      this.dataone = [{value: a, name: '运行中',type: 'success' },
        {value: b, name: '停机',type: 'warning'},
        {value: c, name: '故障', type: 'danger' },
        {value: d, name: '维护中', type: 'primary'}]
    },


    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.ckxxList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
    },
    //导出excel
    exportExcel() {
      const table = this.$refs.tableWaring;
      const wsData = [[]]; // Excel 表格数据

      const headerColumns = table.columns.map(column => column.label); // 表头数据
      wsData[0] = headerColumns;
      debugger
      // 遍历表格数据，将每行数据添加到 wsData 中
      table.data.forEach(row => {
        const rowData = Object.values(row);
        wsData.push(rowData);
      });
      //此处需要导入   npm install xlsx 库   页面引入  import XLSX from 'xlsx';
      const ws = XLSX.utils.aoa_to_sheet(wsData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 导出 Excel 文件
      XLSX.writeFile(wb, 'table_data.xlsx');
    },
    onChange(id) {
      // 将所有标签的选中状态都设置为 false
      for (let itemId in this.checked) {
        if (this.checked.hasOwnProperty(itemId)) {
          this.checked[itemId] = false;
        }
      }
      // 将当前点击的标签的选中状态设置为 true
      this.checked[id] = true;
    },

    //选中
    toggleSelected(index) {
      // 如果当前元素已选中，则取消选中，否则选中
      if (this.isSelected[index]) {
        this.isSelected[index] = false; // 取消选中
        this.removelayer(index);
      } else {
        this.isSelected[index] = true; // 选中
        this.addlayer(index);

      }
    },

    addlayer(aaa){
      let arrayNum;
      if(aaa == 1){
        arrayNum = this.stations;
      }else if(aaa == 2){
        arrayNum = this.yeweiStation;
      }else if(aaa == 3){
        arrayNum = this.stations1;
      }

      // 将地点添加到Cesium地图上
      let imgUrl;
      arrayNum.forEach((station) => {
        const position = Cesium.Cartesian3.fromDegrees(parseFloat(station.lng), parseFloat(station.lat),6);
        // 创建实体并添加到地图上
        if(aaa == '1'){
          imgUrl = videok;
        }else if(aaa == '2'){
          imgUrl = yewei;
        }else if(aaa == '3'){
          imgUrl = hong;
        }
        viewer.entities.add({
          position: position,
          id:station.id,
          name:station.name,
          type:station.type,
          billboard: {
            // 使用一个简单的图标作为标记
            image: imgUrl, // 替换为你的图标路径
            scale: 1.0,
            width: 35, // 设置图片的宽度
            height: 35, // 设置图片的高度
            objectFit: 'contain', // 控制图片填充方式，保持纵横比例
            show: true,// 是否显示

          },
        });
      });

      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // 添加点击事件监听器
      handler.setInputAction((click) => {
        // 获取点击位置的实体信息
        const pickedObject = viewer.scene.pick(click.position);
        if (Cesium.defined(pickedObject) && pickedObject.id) {
          const entity = pickedObject.id;
          const id = entity.id; // 假设实体的名称存储在name属性中
          const type = entity.type; // 假设实体的名称存储在name属性中
          // 调用自定义的弹窗组件显示信息
          this.showInfoWindow(entity,1);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    },


    removelayer(aaa){
      if(aaa == 1){
        this.stations.forEach(s => {
          viewer.entities.removeById(s.id);
        });
      }else if(aaa == 2){
        this.yeweiStation.forEach(s => {
          viewer.entities.removeById(s.id);
        });
      }else if(aaa == 3){
        this.stations1.forEach(s => {
          viewer.entities.removeById(s.id);
        });
      }


    },
  }
};
</script>

<style scoped lang="scss">
  .waterworks{
    width: 100%;
    height: 100%;
    .red-text {
      color: red;
    }

    .orange-text {
      color: orange;
    }
    #cesiumContainer{
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 99;
    }

    .xunjian{
      height: 3rem;
      display: flex;
      position: fixed;
      top: 8%;
      right: 21%;
      z-index: 335;
      align-items: center;
      background-color: white;
      border-radius: 15px;
      padding: 0 1rem;
      .yuanDiv{
        position: relative;
        .yuan{
          position: absolute;
          right: -10px;
          bottom: 0;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 50%;
          background-color: grey; /* 初始背景色为灰色 */
        }
        .selected {
          background-color: #27a6f8; /* 初始背景色为灰色 */;
        }
      }
      /* 定义闪动动画 */
      @keyframes flash {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
      }

      /* 应用闪动动画 */
      .alarm-icon{
        animation: flash 1s infinite;
      }
      div{
        width: 2rem;
        height: 2rem;
        display: flex;
        justify-content: flex-start;
        margin: 0 0.5rem;
        img{
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          cursor: pointer;
        }
      }
    }
    .searchDiv{
      padding: 0 2rem;
      height: 2.85rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: fixed;
      top: 13%;
      left: 25%;
      z-index: 335;
      align-items: center;
      color: white;
      background: linear-gradient( 90deg, #012D4F 0%, #035793 49%, #002C4F 100%);
      border-radius: 9px;
     ul{
       display: flex;
       justify-content: center;
       align-items: center;
       li{
         width: 4rem;
         display: flex;
         justify-content: space-around;
         align-items: center;
         cursor: pointer;
       }
     }

    }

    .h100{
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999;
      top: 0;
      .tanDiv{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #081F31;
        z-index: 999;
        opacity: 0.8;
      }
      .diaStyle{
        /* 修改弹框样式 */
        position: fixed;
        //width: 69rem;
        //height: 32.7rem;
        width: 80rem;
        height: 40rem;
        background-image: url("../../assets/images/tankuang.png");
        background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        padding:2rem 3rem;
        z-index:9999;
        left: 50%;
        top: 50%;
        margin-left: -36rem;
        margin-top: -20rem;
        :deep(.el-tabs__item) {
          font-size: 1.2rem!important;
          color: white;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
        }
        :deep(.el-tabs__item.is-active) {
          color: #1890ff;
        }
        .el-table, :deep(.el-table tr){
          background-color: transparent!important;
        }
        .el-table thead {
          background-color: transparent;
        }
        :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
          color: white;
        }
         :deep(.el-table th.el-table__cell.is-leaf), :deep(.el-table td.el-table__cell){
          border-bottom: none;
          color: white;
        }
        :deep(.el-table tr:hover) {
          background-color: transparent !important;
        }
        :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
          background-color: transparent !important;
        }
        .xx{
          width: 2rem;
          height: 2rem;
          position: absolute;
          top: -1rem;
          right: -1rem;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .videoDiv{
          width: 46rem;
          height: 34rem;
          display: flex;
          align-items: center;
          video{
            width: 100%;
          }
        }
        .colorStyle{
          width: 34rem;
          color: white;
          padding: 5px;
          .borderStyle{
            width: 100%;
            padding: 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            .zhi{
              width: 20rem;
            }
            .yuzhi{
              width: 100%;
              p{
                text-align: left;
              };
              .ml5{
                margin: 0.5rem;
              }

            }

          }
        }
        .contentN{
          width: 100%;
          height: 100%;
          .flex_b{
            width: 100%;
            height: 100%;
            display: flex;
            .echartsDiv{
              width: 50%;
              height: 100%;
              #yeweiji{
                width: 38rem;
                height: 36rem;
              }
            }
            .tableDiv{
              width: 50%;
              height: 100%;
              padding: 0.5rem;
              .waringStyle{
                width: 100%;
                height: 10%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
              }
              .tableDiv{
                width: 100%;
                height: 88%;
                overflow: auto;
              }
            }
          }
        }




      }
    }

    .aslider_s{
      position: absolute;
      z-index: 333;
      width: 20%;
      height: 98%;
      top: 7%;
      right: 0%;
      background-image: url("../../assets/images/rightBg.png");
      background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      margin: 0; /* 去除默认的外边距 */
      padding: 0; /* 去除默认的内边距 */
      .asliderStyle{

        font-size: 1rem;
        height: 86%;
        display: flex;
        align-items: center;
        .cendiv{
          width: 95%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          ul{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            li{
              width: 100%;
              height: 33%;
              .oneStyle{
                width: 98%;
                height: 100%;
                overflow: hidden;
                .headDiv{
                  width: 100%;
                  height: 20%;
                  background-image: url("../../assets/images/sheming.png");
                  background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
                  background-repeat: no-repeat; /* 不重复平铺 */
                  background-position: center; /* 图片居中对齐 */
                  margin: 0; /* 去除默认的外边距 */
                  padding: 0; /* 去除默认的内边距 */
                  position: relative;
                  .shebei{
                    position: absolute;
                    top: 0.9rem;
                    left: 2.5rem;
                    font-size: 1.2rem;
                    font-weight: 600;
                    color: white;
                  }
                }
                .contentDiv{
                  width: 100%;
                  height: 80%;
                  background-image: url("../../assets/images/shenei.png");
                  background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
                  background-repeat: no-repeat; /* 不重复平铺 */
                  background-position: center; /* 图片居中对齐 */
                  margin: 0; /* 去除默认的外边距 */
                  padding: 0; /* 去除默认的内边距 */
                  display: flex;
                  color: white;
                  text-align: center;
                  .colortj{
                    color: #019DFF;
                  }
                  >div{
                    flex: 1;
                  }
                  .bingDiv{
                    width: 100%;
                    height: 100%;
                    padding: 0.5rem;
                    z-index: 999;
                    display: flex;
                    img{
                      border-radius: 5px;
                      margin-bottom: 1rem;
                    }
                    .flex_c{
                      width: 45%;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                    }
                    #bingtone{
                      width: 50%;
                      height: 100%;
                      display: flex;
                      flex-direction: column;
                      align-items: flex-start;
                      justify-content: center;
                      padding: 0.5rem;
                      .oneStyle1{
                          display: flex;
                          width: 100%;
                          height: 20%;

                        div:nth-of-type(1){
                          width: 50%;
                          display: flex;
                          .el-tag{
                            width: 80%;
                          }
                        }
                        div:nth-of-type(2){
                          width: 50%;
                          .el-tag{
                            width: 50%;
                          }
                        }
                      }
                    }

                  }
                  .tiaoDiv{
                    width: 100%;
                    height: 100%;
                    padding: 0.5rem;
                    z-index: 999;
                    div:nth-of-type(1){
                      width: 100%;
                      height: 15%;
                      display: flex;
                      justify-content: space-evenly;
                    }
                    #bingt{
                      width: 100%;
                      height: 85%;
                    }
                    #bingt1{
                      width: 100%;
                      height: 85%;
                    }
                    #bingt2{
                      width: 100%;
                      height: 85%;
                    }
                    #bingt3{
                      width: 100%;
                      height: 85%;
                    }


                  }
                  .backround{
                      width: 100%;
                      height: 200px;
                    :deep(.toptitle){
                      width: 100%;
                      height: 15%;
                      display: flex;
                      //background-color: gainsboro;
                      margin-top: 10px;
                      border-bottom:1px solid white;
                      background-color: transparent;
                      color:#01B0FF;
                      z-index: 999;
                      .item{
                        width: 25%;
                        text-align: center;
                      }
                    }
                    .gundong{
                      width: 100%;
                      height: 85%;
                      overflow: hidden;
                      .item{
                        width: 100%;
                        text-align: center;
                        display: flex;
                        .spanClass{
                          display: inline-block;
                          width: 25%;
                        }
                      }
                    }
                  }
                  :deep(.el-table), :deep(.el-table__expanded-cell){
                    background-color: transparent;
                    border: none;
                  }
                  /* 表格内背景颜色 */
                  :deep(.el-table th),
                  :deep(.el-table tr),
                  :deep(.el-table td){
                    background-color: transparent;
                    color:white;
                    border: none;
                  }
                  .seamless-warp{
                    height: 200px;
                    overflow: hidden;
                  }
                  :deep(.el-table .cell){
                    text-align: center;
                  }

                  :deep(.el-table--border:after) {
                    height: 100%;
                    right: 0;
                    top: -1px;
                    width: 0px;
                  }
                  :deep(.el-table--border:before) {
                    height: 100%;
                    left: 0;
                    top: -1px;
                    width: 0px;
                  }
                  :deep(.el-table__border-left-patch) {
                      height: 100%;
                      top: 0;
                      width: 0px;
                  }
                  :deep(.el-table--border .el-table__inner-wrapper:after) {
                    height: 0px;
                    left: 0;
                    top: 0;
                    width: 100%;
                    z-index: calc(var(--el-table-index) + 2);
                  }

                }
              }
            }
          }
        }
      }
    }

  }


</style>

